<template>
  <div class="p-1.5 box-border">
    <div class="flex justify-between">
      <div>
        <a-form
            layout="inline"
            :model="searchState"
            @finish="getAllLog"
          >
            <a-form-item label="日志内容">
              <a-input v-model:value="searchState.Content" placeholder="请输入日志内容" allowClear>
              </a-input>
            </a-form-item>
            <a-form-item label="日志级别">
              <a-select
                ref="select"
                placeholder="请选择日志级别"
                allowClear
                v-model:value="searchState.Level"
                style="width: 120px"
              >
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option :value="1">正常</a-select-option>
                <a-select-option :value="2">警告</a-select-option>
                <a-select-option :value="3">错误</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="日期范围">
              <a-range-picker :value="searchState.DateRange" show-time :disabled-date="disabledDate" @change="DateRangeChange"/>
            </a-form-item>
            <a-form-item>
              <a-button type="default" @click="ResetSearchState">重置</a-button>
              <a-button class="!ml-1.5" type="primary"  html-type="submit"> 查询  </a-button>
            </a-form-item>
          </a-form>
      </div>
      <div>
        <a-button type="default" class="!ml-1.5" @click="exportAllLog">导出全部</a-button>
      </div>
    </div>
    <a-table :columns="columns" :data-source="roleList"  class="!mt-4" :bordered="true" :loading="loading"  :scroll="{ y: windowHeight - 180 }" :pagination="{current:searchState.Page,total:total,pageSize:searchState.PageSize,'show-size-changer':true}" @change="PageChange">

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'level'">
          <span>
            <a-tag v-if="record.level == 1" color="#87d068">Log</a-tag>
            <a-tag v-else-if="record.level == 2" color="#ffd591">Warn</a-tag>
            <a-tag v-else color="#f50">Error</a-tag>
          </span>
        </template>
        <template v-if="column.key === 'updatedAt'">
          <span>
            {{dayjs(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
import { ref,onMounted,reactive,toRaw,onActivated } from 'vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useLogBridge,useDotNetBridge, windowHeight } from '../tools/index';

const disabledDate = (current) => {
  return current && current > dayjs();
};
const total = ref(0);
const searchState = reactive({
  Content: '',
  Level: 0,
  DateRange: [],
  Page:1,
  PageSize:10
});

const columns = [
  {
    title: '日志内容',
    dataIndex: 'content',
    key: 'content',
    align: 'center',
  },
  {
    title: '日志级别',
    dataIndex: 'level',
    key: 'level',
    width: 200,
    align: 'center',
  },
  {
    title: '日志时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
    width: 200,
    align: 'center',
  },
];
const roleList = ref([]);
const loading = ref(true);
const logBridge = useLogBridge();
const dotNetBridge = useDotNetBridge();



const ResetSearchState = () => {
  searchState.Content = "";
  searchState.Level = 0;
  searchState.DateRange = [];
}
//获取所有日志
const getAllLog =async () => {
  loading.value = true;
  try {
    const result = await logBridge.GetAllList(JSON.stringify({...searchState,StartDate:searchState?.DateRange[0] || "",EndDate:searchState?.DateRange[1] || ""}));
    const res = JSON.parse(result);
    loading.value = false;
    if(res.code==0){
      roleList.value = [...res.data.list];
      total.value = res.data.total;
    }else{
      message.error(res.msg);
    }
  } catch (error) {
     loading.value = false;
      console.log(error,logBridge);
      alert(error);
  }
};

const PageChange = (pagination) => {
  searchState.Page = pagination.current;
  searchState.PageSize = pagination.pageSize;
  getAllLog();
}



onMounted(() => {
  getAllLog();
})

onActivated(()=>{
  console.log("路由切换了");
})


//导出全部
const exportAllLog = async () => {
  try {
    const result = await logBridge.GetAllList(JSON.stringify({  Name: '',
      Code: '',
      Page:1,
      PageSize:1000}));
    const res = JSON.parse(result);
    loading.value = false;
    message.loading("正在导出，请稍等...");
    if(res.code==0){
      dotNetBridge.ExportExcel(JSON.stringify([...res.data.list]),"日志.xlsx").then(result2=>{
        const res2 = JSON.parse(result2);
        if(res2.code==0){
          message.success("导出成功");
        }else{
          res2.msg&&message.error(res2.msg);
        }
      })
    }else{
      message.error(res.msg);
    }
  } catch (error) {
     loading.value = false;
     console.log(error);
  }
   
}

const DateRangeChange = (value,model)=>{
  searchState.DateRange = value || []
}
</script>